<template>
  <div>
    <div v-if="dictName === ''">
      <div class="my-code">点击字典查看详情</div>
    </div>
    <div v-else>
      <!--工具栏-->
      <div class="margin-bottom">
        <!-- 搜索 -->
        <el-input
          clearable
          placeholder="输入字典标签查询"
          style="width: 200px;"
          class="filter-item"
          size="mini"
        />
        <el-button
          class="filter-item"
          size="mini"
          type="success"
          icon="el-icon-search"
        >搜索</el-button>
      </div>
      <!--表单组件-->
      <eForm ref="form" :is-add="isAdd" :dict-id="dictId"/>
      <!--表格渲染-->
      <el-table v-loading="loading" tooltip-effect="light" :data="dicDetail" size="small" style="width: 100%;" border>
        <el-table-column label="所属字典">
          <template>{{ dictName }}</template>
        </el-table-column>
        <el-table-column prop="name" label="字典标签"/>
        <el-table-column prop="supplement" label="描述"/>
        <el-table-column prop="value" show-overflow-tooltip label="字典值"/>
        <!-- <el-table-column prop="sort" label="排序"/> -->
        <el-table-column label="操作" width="130px" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
            <el-popover :ref="scope.row.id" placement="top" width="180">
              <p>确定删除本条数据吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
                <el-button
                  :loading="delLoading"
                  type="primary"
                  size="mini"
                  @click="subDelete(scope.row.id)"
                >确定</el-button>
              </div>
              <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import eForm from './detail-form';
import { dictionary_all, dictionary_remove } from '@/api/system';
export default {
  components: { eForm },
  data() {
    return {
      isAdd: false,
      loading: false,
      delLoading: false,
      dicDetail: [],
      dictName: '',
      dictId: 0
    };
  },
  created() {
    this.loading = false;
  },
  methods: {
    async init() {
      this.loading = true;
      const res = await dictionary_all();
      console.log(res);
      this.dicDetail = res.data.reduce((i, c) => {
        if (c.parentId === this.dictId) {
          i.push(c);
        }
        return i;
      }, []);
      this.loading = false;
    },
    async subDelete(id) {
      try {
        this.delLoading = true;
        await dictionary_remove(id, {
          id: id
        });
        this.$refs[id].doClose();
        this.init();
        this.delLoading = false;
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      } catch (error) {
        console.error(error);
        this.delLoading = false;
      }
    },
    edit(data) {
      this.isAdd = false;
      const _this = this.$refs.form;
      _this.form = {
        id: data.id,
        name: data.name,
        value: data.value,
        lv: data.lv,
        supplement: data.supplement,
        parentId: data.parentId
      };
      _this.dialog = true;
    }
  }
};
</script>

<style scoped>
.my-code {
  padding: 15px;
  line-height: 20px;
  border-left: 3px solid #ddd;
  color: #333;
  font-family: Courier New;
  font-size: 12px;
}
</style>
